<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/game.css"/>
	</head>
	
	<body>
		<div id="bg">
			<div id="cover">NEXT</div>    
			<div id="bg1">
				<div class="Htop topl">第&nbsp;<span id="Num">1</span>&nbsp;关</div>
				<div class="Htop topr">按序点击
				<div id="random"></div>
				</div>
				<div class="clear"></div>
				<div id="gamebox">
						<button>1</button>
						<button>2</button>
						<button>3</button>
						<button>4</button>
						<button>5</button>
						<button>6</button>
						<button>7</button>
						<button>8</button>
						<button>9</button>
						<!--<button>10</button>
						<button>11</button>-->
						<span id="times1" class="times">4</span><span id="times2" class="times">6</span>
						<button>12</button>
						<button>13</button>
						<button>14</button>
						<button>15</button>
						<button>16</button>
						<button>17</button>
						<button>18</button>
						<button>19</button>
						<button>20</button>
				</div>
			</div>
			
			<div id="gameStart">
				<p>HELLO HA</p>
					<div>
						<button id="startGame">START</button>
						<button id="more">MORE</button>
					</div>
			</div>
			<div id="gameOver">
				<p>Game Over</p>
				<div>
					<button id="restart">重新开始</button>
					<button id="back">返回主页</button>
				</div>
					
			</div>
		</div>
	</body>
	
	
	
	
	
	
	
	
	
	
<!--/REM字体格式/-->
	<script>
    document.body.style.height = window.innerHeight + "px";
     /*动态改变根元素字体大小*/
    function recalc() {
    	//获取客户端宽度
        var clientWidth = document.documentElement.clientWidth;
        if(!clientWidth) return;
       // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
       document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
     }
	function initRecalc() {
        recalc();
        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
        if(!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    }
     initRecalc();
     </script>
     
     
     
     
     
     
     
     
<script type="text/javascript">
	 var gameStart=document.querySelector("#gameStart")
	 var gameOver=document.querySelector("#gameOver")
	
	 var times;//声明倒计时
	 var times1=document.getElementById("times1");//计时器左
	 var times2=document.getElementById("times2");//计时器右
	 var start1=times1.innerHTML;//保存 开始时候记录倒计时左边的数值 
	 var start2=times2.innerHTML;//保存 开始时候记录倒计时右边的数值 
	 var cover=document.getElementById("cover");//遮盖元素
	 var Num=document.getElementById("Num");//关数的页面元素
	 var random=document.getElementById("random");//装着规则排序的页面元素
	 var btn=document.querySelectorAll("#gamebox>button");//按钮 列表
     var time=0;   //点击的次数
     var round=1		//下一关的时候round++
     
    
     
//给每个 按钮 添加监听事件
for(let i=0;i<btn.length;i++){
	 	btn[i].addEventListener("click",function(){
	 		//点对
     		if(btn[i].getAttribute("data-type")==random.children[time].getAttribute("data-type")){
     			btn[i].style.background="gold";btn[i].style.fontSize="1rem";
     			btn[i].style.color="white";btn[i].innerHTML="BINGO";
     			console.log("bingo")
     			time++;
     			btn[i].disabled="ture";
     			
     		}else{//点错
     			btn[i].style.background="red";
     			btn[i].innerHTML="NO";btn[i].style.color="white";
     			console.log("wrong");
     			
     			//退出游戏
     			var times1=document.getElementById("times1");//计时器   找不到时重新获取一次
				var times2=document.getElementById("times2");
     			var t_no=setTimeout(function(){
     				//把所有状态复原
     				gameOver.style.left="0vw";
     				clearInterval(times)
     				 console.log(times1)
     				times1.innerHTML=start1;
     				times2.innerHTML=start2;
     				time=0;
     				round=1;
     				Num.innerText=round;
	     			for(let i=0;i<btn.length;i++){
				     			btn[i].style.fontSize="1.5rem";
				     			btn[i].disabled=false;
				     			btn[i].style.color="black";
				    }
	     			clearTimeout(t_no);
     			}
     			,200)
     			
     		}
     	//通关的时候执行以下代码 
     		if(random.children.length==time){
     				//通关动画效果   
	     		console.log("通关了");
				cover.style.left="0";
				
				if(cover.style.left=="0px"){
						
				var trans=setTimeout(function(){//这个定时器是让通关效果在中间停顿1s，不影响其他效果
				//cover.style.left="-100vw"
				
/////////////////////////////////////////////////////////////////////////////////////
	     			//倒计时 
	     			var times1=document.getElementById("times1");//计时器左
					var times2=document.getElementById("times2");//    右
	     			var now1=parseInt(times1.innerHTML);
	     			var now2=parseInt(times2.innerHTML);
	     			clearInterval(times)
	     			
	     			cover.style.left="100vw";   //让通关效果页回到原位
	     			console.log("finish transition")
	     		
	     		var t1 = setTimeout(function(){  //加一个定时器，控制让过渡效果做完才刷新页面
	     				round++;
		     			Num.innerText=round;
			     		//把所有状态还原
			     		for(let i=0;i<btn.length;i++){
			     		btn[i].style.fontSize="1.5rem";
			     		btn[i].disabled=false;
			     		btn[i].style.color="black";
			     		}
			     		time=0;//点击次数还原
			     		
			     			//通关加3秒奖励
			     			if(now2+3>9){	
			     			 times2.innerHTML=(now2+3)-10;
			     			 times1.innerHTML=now1+1;
							}else{
							 times1.innerHTML=now1;
							 times2.innerHTML=now2+3;
							}
							//
			     			ruleHtml() //重写页面按钮
			     		clearTimeout(t1);
//	     			    cover.style.transition="none";
//			     		cover.style.transition="all 0.5s";//再加回过渡效果
			     	},50)//这个时间可以看过渡效果的时间而做修改                
///////////////////////////////////////////////////////////////////////////////////////   		
					clearTimeout(trans);
						},400)//这是通关效果停顿时间
					}
	     			

	
	     		
     			}
     })
}




//开始页面的按钮
	var startGame=document.querySelector("#startGame");
	startGame.addEventListener("click",function(){
		gameStart.style.left="100vw"
		 ruleHtml(); // 一开始时渲染，第一关时
	})
	var more=document.querySelector("#more");
		more.addEventListener("click",function(){
		alert("  Are You Kidding Me ??")
	})
//结束页面的按钮
	var restart=document.querySelector("#restart");
		restart.addEventListener("click",function(){
			gameOver.style.left="100vw";
		 	ruleHtml(); // 进入第一关第一关时，其他状态已在倒计时的定时器内恢复初始状态了
	})	
	var back=document.querySelector("#back");
		back.addEventListener("click",function(){
			gameOver.style.left="100vw";
			gameStart.style.left="0vw";
		 	
	})	
//被调用时生成：新的18个数字排列	
function newGroup(){	
     		var born=[];
	     for(var n=0;n<Infinity;n++){
	     	var i =Math.floor(Math.random()*10 )
	     	if(born.indexOf(i)==-1){
		     	born.push(i)
		     	continue;
	     	}
	     	if(born.length>=10){
	     		born.push(i);  		
	     	}
	     	if(born.length==18){
	     		break;
	     	}
	     }
	    return born;
     }

     
//被调用时用作渲染页面按钮
//生成新的数组并遍历进去页面的按钮上
function newHtml(){
	var color=["lightseagreen","cornflowerblue","#31a3ca","cornflowerblue","cornflowerblue","cornflowerblue","#4dbb9f","#4dbb9f","#31a3ca","lightseagreen","#31a3ca","#31a3ca","lightseagreen","#31a3ca","#4dbb9f","#4dbb9f","lightseagreen","lightseagreen"]
			var arr=newGroup();//刷新一个数组
	     	for(let i=0;i<btn.length;i++){
				btn[i].innerHTML=arr[i];
				btn[i].setAttribute("data-type",arr[i])
					//  按钮颜色
						let x =Math.floor(Math.random()*color.length)//这里的x得到的是(0 , b.length-1)
						btn[i].style.background=color[x];
						color.splice(x,1) //数组的方法，替代，这里用作删除，在b上删除添加进去了的元素
				}
	return arr;
}
	 	 
	 
//  被调用时 生成规则数组,*并且在这个函数里才*****生成按钮数组和写进按钮里*******
function rule(){		
			let b= newHtml();  //运行这个函数并且拿到函数里的写进页面里的数组
			var rules=[]; 
			for(let i=0;i<round+3;i++){
				let x =Math.floor(Math.random()*b.length)//这里的x得到的是(0 , b.length-1)
						rules.push(b[x])
						b.splice(x,1) //数组的方法，替代，这里用作删除，在b上删除添加进去了的元素
			}
			return rules;//得到一个规则数组
}			

	  
//	  写进页面*按序*里  	这个函数是所有的开端，其他函数都在这里面被逐层调用
function ruleHtml(){
		var a=rule(); //运行函数rule并拿到此函数返回的规则数组
	  	var temp="";
//	  	console.log(a)	
		for(let i=0;i<a.length;i++){
			temp+= '<span data-type='+a[i]+' class="num">' +a[i]+   '</span>'
			random.innerHTML=temp;
		}
		
		//倒计时
		 times=setInterval(function(){
			times2.innerHTML-- ;
			if(times2.innerHTML<0&&times1.innerHTML!=0){
				times1.innerHTML-- ;
				times2.innerHTML=9 ;
			}
			if(times1.innerHTML==0&&times2.innerHTML<0){
				times2.innerHTML=0;
				clearInterval(times)
//				alert("gameover")
					//退出游戏
		     				//时间到  的效果
						for(let i=0;i<btn.length;i++){
							btn[i].disabled="true";
							btn[i].style.background="red";
							btn[i].innerHTML="LOSTER";btn[i].style.fontSize="0.8rem"
						}
		     			var t_no=setTimeout(function(){
		     				//把所有状态复原
		     				gameOver.style.left="0vw";
		     				clearInterval(times)
		     				 console.log(times1)
		     				times1.innerHTML=start1;
		     				times2.innerHTML=start2;
		     				time=0;
		     				round=1;
		     				Num.innerText=round;
			     			for(let i=0;i<btn.length;i++){
						     			btn[i].style.fontSize="1.5rem";
						     			btn[i].disabled=false;
						     			btn[i].style.color="black";
						    }
			     			clearTimeout(t_no);
		     			}
		     			,550)
     			

			}
		},1000)
		
		 console.log(times1) //
		
}
	  
</script>
     
</html>
    	
<!--//   生成一个数组，同样数字最多出现2次，并且不能相邻   ///  现用在原数组上取一删一的办法
//			var rules=[];
//		     for(var n=0;n<999;n++){			
//		     	var i =parseInt(Math.floor(Math.random(0,1)*10 ))
//		     	
//		     	if(rules.indexOf(i)==-1){
//		     		rules.push(i)
//		     	}else if(rules.indexOf(i,rules.indexOf(i)+1)==-1&&i!=rules[(rules.length)-1]){
////		     		console.log("console",rules,rules.length)
//		     			rules.push(i)
//		     			}
//
//		     	if(rules.length==round+3){   
//		     		break;
//		     	}
//		     }
//	    return rules;-->
